<template>
  <div>
    <headerMiddle title="栏目管理" />
    <div class="active">
      <h3>点击删除以下频道(最少剩下两个频道)</h3>
      <div
        @click="toDeactive(index)"
        class="tab"
        v-for="(item,index) in tabActive"
        :key="index"
      >{{item.name}}</div>
    </div>
    <div class="deactive">
      <h3>点击添加以下频道</h3>
      <div
        @click="toActive(index)"
        class="tab"
        v-for="(item,index) in tabDeactive"
        :key="index"
      >{{item.name}}</div>
    </div>
  </div>
</template>

<script>
import headerMiddle from "../components/headerMiddle";
export default {
  components: {
    headerMiddle
  },
  data() {
    return {
      tabActive: [],
      tabDeactive: []
    };
  },
  watch: {
    tabActive() {
      // 只能储存字符串
      localStorage.setItem("tabActive", JSON.stringify(this.tabActive));
    },
    tabDeactive() {
      // 只能储存字符串
      localStorage.setItem("tabDeactive", JSON.stringify(this.tabDeactive));
    }
  },
  methods: {
    toDeactive(index) {
      // 判断剩下一个的情况下不要继续删除
      if (this.tabActive.length == 2) {
        return;
      }
      // 这里接收到的 index 其实就是这个分类 在 tabActive 当中的索引
      // 第一将这个分类放入未激活列表
      this.tabDeactive.push(this.tabActive[index]);
      // 第二将这个分类在激活列表里面删除
      this.tabActive.splice(index, 1);
    },
    toActive(index) {
      this.tabActive.push(this.tabDeactive[index]);
      this.tabDeactive.splice(index, 1);
    }
  },
  mounted() {
    if (
      localStorage.getItem("tabActive") &&
      localStorage.getItem("tabDeactive")
    ) {
      this.tabActive = JSON.parse(localStorage.getItem("tabActive"));
      this.tabDeactive = JSON.parse(localStorage.getItem("tabDeactive"));
    } else {
      this.$axios({
        url: "/category",
        method: "get"
      }).then(res => {
        const { data } = res.data;
        console.log(data);

        this.tabActive = data;
      });
    }
  }
};
</script>

<style lang="less" scoped>
.active,
.deacttive {
  height: 40vh;
  padding: 10px;
}
.tab {
  height: 8.333vw;
  line-height: 8.333vw;
  padding: 0 2.778vw;
  background: #f8f8f8;
  border: 1px solid #eee;
  float: left;
  margin: 1.389vw 1.778vw;
}
</style>